define([
    'app',
    'jquery-cropper',
    'css!css/views/edit-image'
], function(app) {
    app.controller('ImageEditController',['$scope', '$timeout', 'Config', 'Context', 'Dialog',
        function($scope, $timeout, Config, Context, Dialog) {
        var self = this;
        self.$cropImage = null;
        self.imageName = '';

        self.init = function() {
            $timeout(function() {
                angular.element('#imageFile').change(function(event) {
                    self.imageName = angular.element(this).val();
                    if (self.imageName == '') {
                        return false;
                    }
                    initFileReader(event);
                });
            });
        };

        self.close = function() {
            if (self.$cropImage != null) {
                self.$cropImage.cropper('destroy');
            }
            Context.close();
        };

        self.save = function() {
            Context.saved = true;
            if (self.imageName != '') {
                var extension = self.imageName.substring(self.imageName.lastIndexOf('.') + 1);
                Context.imageName = self.imageName;
                Context.imageDataUrl = self.$cropImage.cropper('getCroppedCanvas').toDataURL('image/' + extension);
            }
            self.close();
        };

        self.rotate = function() {
            if (self.$cropImage != null) {
                self.$cropImage.cropper('rotate', 90);
            }
        };
        
        function initFileReader(event) {
            // load image
            var imageFile = event.currentTarget.files[0];
            if (imageFile.size > Config.maxUploadSize) {
                Dialog.$alert('上传的图片大小不可以超过' + Config.maxUploadSize + '字节！');
                return;
            }
            var reader = new FileReader();
            reader.onload = function(evt) {
                $scope.$apply(function($scope) {
                    // load cropper
                    self.$cropImage = angular.element('#crop-image');
                    var $preview = angular.element('.container-image').removeClass('hidden').find('.preview');
                    self.$cropImage.attr('src', evt.target.result).cropper('destroy').cropper({
                        //autoCropArea: 0.75,
                        aspectRatio: 8/9,
                        movable: false,
                        zoomable: false,
                        rotatable: true,
                        scalable: false,
                        ready: function() {
                            var $clone = angular.element(this).clone().removeClass('cropper-hidden');
                            $clone.css({
                                display: 'block',
                                width: '100%',
                                minWidth: 0,
                                minHeight: 0,
                                maxWidth: 'none',
                                maxHeight: 'none'
                            });
                            $preview.css({ width: '100%', overflow: 'hidden' }).html($clone);
                        },
                        crop: function(e) {
                            var imageData = angular.element(this).cropper('getImageData');
                            var previewAspectRatio = e.width / e.height;
                            var previewWidth = $preview.width();
                            var previewHeight = previewWidth / previewAspectRatio;
                            var imageScaledRatio = e.width / previewWidth;

                            $preview.height(previewHeight).find('img').css({
                                width: imageData.naturalWidth / imageScaledRatio,
                                height: imageData.naturalHeight / imageScaledRatio,
                                marginLeft: -e.x / imageScaledRatio,
                                marginTop: -e.y / imageScaledRatio
                            });
                        }
                    });
                });
            };
            reader.readAsDataURL(imageFile);
        }
    }]);
});
